<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:rich="http://richfaces.org/rich" 
      xmlns:a4j="http://richfaces.org/a4j" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>Principal</title>

    </h:head>
    <h:body>

        <ui:composition template="/prot/principal.xhtml">
            <ui:define name="content"> 

                <!-- Main bar -->
                <div class="mainbar">

                    <!-- Page heading -->
                    <div class="page-head">
                        <!-- Page heading -->
                        <h2 class="pull-left">Bienvenido VideoClub UPV
                            <!-- page meta -->
                            
                        </h2>


                        <!-- Breadcrumb -->
                        <div class="bread-crumb pull-right">
                            <a href="index.html"><i class="icon-home"></i> Home</a> 
                            <!-- Divider -->
                            <span class="divider">/</span> 
                            <a href="#" class="bread-current">Presentación</a>
                        </div>

                        <div class="clearfix"></div>

                    </div>
                    <!-- Page heading ends -->



                    

                </div>

                <script type="text/javascript">
                    $(function() {

                        $("#todayspark1").sparkline([${ctrPanelControl.visitasDia}], {
                            type: 'bar',
                            height: '50',
                            barWidth: 7,
                            barColor: '#fff'});

                    });
                </script>

                <!-- Script for this page -->
                <script type="text/javascript">
                    //<![CDATA[
                    $(function() {

                        var d1temp = [${ctrPanelControl.resueltosxDia}];
                        var d1 = [];

                        for (var i = 0; i < d1temp.length; ++i)
                            d1.push([i, parseInt(d1temp[i])]);

                        var d2temp = [${ctrPanelControl.resueltosBrecha}];
                        var d2 = [];


                        for (var i = 0; i <= d2temp.length; ++i)
                            d2.push([i, parseInt(d2temp[i])]);


                        var stack = 0, bars = true, lines = false, steps = false;

                        function plotWithOptions() {
                            $.plot($("#bar-chart"), [d1, d2], {
                                series: {
                                    stack: stack,
                                    lines: {show: lines, fill: true, steps: steps},
                                    bars: {show: bars, barWidth: 0.8}
                                },
                                grid: {
                                    borderWidth: 0, hoverable: true, color: "#777"
                                },
                                colors: ["#52b9e9", "#0aa4eb"],
                                bars: {
                                    show: true,
                                    lineWidth: 0,
                                    fill: true,
                                    fillColor: {colors: [{opacity: 0.9}, {opacity: 0.8}]}
                                }
                            });
                        }

                        plotWithOptions();

                        $(".stackControls input").click(function(e) {
                            e.preventDefault();
                            stack = $(this).val() == "With stacking" ? true : null;
                            plotWithOptions();
                        });
                        $(".graphControls input").click(function(e) {
                            e.preventDefault();
                            bars = $(this).val().indexOf("Bars") != -1;
                            lines = $(this).val().indexOf("Lines") != -1;
                            steps = $(this).val().indexOf("steps") != -1;
                            plotWithOptions();
                        });

                        /* Bar chart ends */

                    });

                    /* Curve chart starts */

                    $(function() {
                        var sinTemp = [${ctrPanelControl.acumResueltosxDia}]; 
                        var cosTemp = [${ctrPanelControl.acumNoResueltosxDia}];
                        var maxValor=Math.max(${ctrPanelControl.acumResueltosxDia},${ctrPanelControl.acumNoResueltosxDia})+1;
                        
                        var sin=[];
                        var cos=[];
                        
                        for (var i = 0; i < sinTemp.length; ++i)
                            sin.push([i, parseInt(sinTemp[i])]);
                        
                        
                        for (var i = 0; i < cosTemp.length; ++i)
                            cos.push([i, parseInt(cosTemp[i])]);
                        
                        
                        
                        /*for (var i = 0; i < 14; i += 0.5) {
                            sin.push([i, Math.sin(i)]);
                            cos.push([i, Math.cos(i)]);
                        }*/

                        var plot = $.plot($("#curve-chart"),
                                [{data: sin, label: "Defectos"}, {data: cos, label: "Soluciones"}], {
                            series: {
                                lines: {show: true,
                                    fill: true,
                                    fillColor: {
                                        colors: [{
                                                opacity: 0.05
                                            }, {
                                                opacity: 0.01
                                            }]
                                    }
                                },
                                points: {show: true}
                            },
                            grid: {hoverable: true, clickable: true, borderWidth: 0},
                            yaxis: {min: -1, max: maxValor},
                            colors: ["#fa3031", "#43c83c"]
                        });


                        function showTooltip(x, y, contents) {
                            $('<div id="tooltip">' + contents + '</div>').css({
                                position: 'absolute',
                                display: 'none',
                                top: y + 5,
                                width: 100,
                                left: x + 5,
                                border: '1px solid #000',
                                padding: '2px 8px',
                                color: '#ccc',
                                'background-color': '#000',
                                opacity: 0.9
                            }).appendTo("body").fadeIn(200);
                        }

                        var previousPoint = null;
                        $("#curve-chart").bind("plothover", function(event, pos, item) {
                            $("#x").text(pos.x.toFixed(2));
                            $("#y").text(pos.y.toFixed(2));

                            if (item) {
                                if (previousPoint != item.dataIndex) {
                                    previousPoint = item.dataIndex;

                                    $("#tooltip").remove();
                                    var x = item.datapoint[0].toFixed(2),
                                            y = item.datapoint[1].toFixed(2);

                                    showTooltip(item.pageX, item.pageY, item.series.label + " del día " + x + " = " + y);
                                }
                            }
                            else {
                                $("#tooltip").remove();
                                previousPoint = null;
                            }
                        });

                        $("#curve-chart").bind("plotclick", function(event, pos, item) {
                            if (item) {
                                $("#clickdata").text("Seleccionaste el día " + item.dataIndex + " de " + item.series.label + ".");
                                plot.highlight(item.series, item.datapoint);
                            }
                        });

                    });

                    /* Curve chart ends */





                    //]]>
                </script>   



            </ui:define>
        </ui:composition>

    </h:body>
</html>